<template>
  <div class="BuriedAnalysis">
    <el-card>
      <div class="searchBox">
        <h3>
          <div class="tt"></div>
          埋点列表
        </h3>
        <div class="right">
          <el-input
            placeholder="请输入内容"
            v-model="name"
            clearable
            size="small"
          >
            <template slot="prepend">事件名称</template>
          </el-input>
          <el-input
            placeholder="请输入内容"
            v-model="id"
            clearable
            size="small"
          >
            <template slot="prepend">ID</template>
          </el-input>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button
            class="btn"
            icon="el-icon-circle-plus-outline"
            @click="add"
            size="small"
            >添加</el-button
          >
          <el-button icon="el-icon-document" size="small">导出</el-button>
          <el-button
            icon="el-icon-s-promotion"
            size="small"
            @click="upDialogVisible = true"
            >导入</el-button
          >
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="name" label="ID"> </el-table-column>
        <el-table-column prop="address" label="事件名称"> </el-table-column>
        <el-table-column prop="address" label="时间"> </el-table-column>
        <el-table-column prop="address" label="事件ID"> </el-table-column>
        <el-table-column prop="address" label="系统ID"> </el-table-column>
        <el-table-column prop="address" label="应用ID"> </el-table-column>
        <el-table-column prop="address" label="操作"> </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 添加埋点弹框 -->
    <el-dialog
      title="添加埋点"
      :visible.sync="dialogFormVisible"
      width="30%"
      @close="addClose"
    >
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item
          label="事件名称"
          :label-width="formLabelWidth"
          prop="event_name"
        >
          <el-input v-model="form.event_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="事件ID"
          :label-width="formLabelWidth"
          prop="event_id"
        >
          <el-input v-model="form.event_id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="应用ID" :label-width="formLabelWidth">
          <el-input
            v-model="form.app_id"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="系统ID" :label-width="formLabelWidth" prop="os_id">
          <el-radio-group v-model="form.os_id">
            <el-radio label="android">android</el-radio>
            <el-radio label="ios">ios</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="buryingAdd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑埋点弹框 -->
    <el-dialog title="编辑埋点" :visible.sync="dialogFormVisibleB" width="30%">
      <el-form :model="formB" :rules="rules" ref="ruleFormB">
        <el-form-item label="ID" :label-width="formLabelWidth">
          <el-input v-model="formB.id" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item
          label="事件名称"
          :label-width="formLabelWidth"
          prop="event_name"
        >
          <el-input v-model="formB.event_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="事件ID"
          :label-width="formLabelWidth"
          prop="event_id"
        >
          <el-input v-model="formB.event_id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="应用ID" :label-width="formLabelWidth">
          <el-input
            v-model="formB.app_id"
            disabled
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="系统ID" :label-width="formLabelWidth" prop="os_id">
          <el-radio-group v-model="formB.os_id">
            <el-radio label="android">android</el-radio>
            <el-radio label="ios">ios</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="时间" :label-width="formLabelWidth">
          <el-input
            v-model="formB.create_time"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleB = false">取 消</el-button>
        <el-button type="primary" @click="editSaveBtn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 导入 -->
    <el-dialog title="上传文件" :visible.sync="upDialogVisible" width="30%">
      <el-upload
        class="upload-demo"
        :http-request="upLoad"
        action
        :before-upload="beforeAvatarUpload"
        :multiple="false"
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <!-- <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div> -->
      </el-upload>
      <div class="tac">
        <el-button class="w300" size="small" type="primary" @click="upSubmit"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  data() {
    return {
      name: "",
      id: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      //添加埋点弹框
      dialogFormVisible: false,
      form: {
        event_name: "", //事件名称
        event_id: "", //事件ID
        os_id: "", //系统ID
        app_id: "2a7efcc53a05ae31ea2d6bbe14ed2b94", //应用ID
      },
      formLabelWidth: "90px",
      //编辑埋点弹框
      formB: {
        id: "",
        event_name: "", //事件名称
        create_time: "", //时间
        event_id: "", //事件ID
        os_id: "", //系统ID
        app_id: "", //应用ID
      },
      dialogFormVisibleB: false,
      rules: {
        event_name: [
          { required: true, message: "请输入事件名称", trigger: "blur" },
        ],
        event_id: [
          { required: true, message: "请输入事件ID", trigger: "blur" },
        ],
        os_id: [{ required: true, message: "请选择系统ID", trigger: "change" }],
      },
      upDialogVisible: false,
    };
  },
  methods: {
    getList() {},
    add() {
      this.dialogFormVisible = true;
    },
    editSaveBtn() {
      this.dialogFormVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.BuriedAnalysis {
  padding: 20px;
  .searchBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    h3 {
      margin: 0;
      display: flex;
      align-items: center;
      .tt {
        display: inline-block;
        width: 5px;
        height: 18px;
        margin-right: 5px;
        background-color: #7b94d8;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .el-input {
        margin-right: 10px;
      }
    }
  }
}
</style>